<!--
 * @description  : 中小学坐标采集-辽宁
 * @descriptionDetail : 中小学坐标采集-辽宁
 * @author       : bln
 * @create       : 2024-09-02 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="title" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="supervision-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
      <u-search
        class="supervision-search"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="请输入区域名称"
        v-model="searchKey"
        @custom="toSearchList"
      ></u-search>
    </view>
    <view class="content u-page">
      <me-table
        :i="0"
        :index="0"
        :top="110"
        :init-load="false"
        ref="mescrollItem0"
        :load-data="loadData"
        :height="getListViewHeight()"
      >
        <view slot-scope="d" class="list-item-root">
          <u-swipe-action
            @click="swiperClick"
            @open="swiperOpen"
            :show="d.data.show"
            :index="d.data.prohibitUuid"
            :options="d.data.swiperOptions"
            :disabled="d.data.swiperDisabled"
          >
          <view class="list-lay">
            <view class="content-title-lay u-flex u-row-between">
              <text>所属组织名称：{{ d.data.orgName || '' }}</text>
                <u-tag class="u-m-r-20" :spStyle="sysCodeColors[d.data.isActive]" mode="dark" shape="circle" :text="d.data.isActive == 1 ? '启用' : '停用'"></u-tag>
              </view>
              <view class="content-title-lay">
                <text>所属网格：{{ d.data.gridName || '' }}</text>
              </view>
              <view class="content-title-lay">
                <text>区域名称：{{ d.data.prohibitName || '' }}</text>
              </view>
              <view class="content-title-lay">
                <text>区域类型：{{ d.data.prohibitClassifyCode == '0101' ? '幼儿园' : '中小学' }}</text>
              </view>
              <view class="content-title-lay">
                <text>地址：{{ d.data.prohibitAddr || '' }}</text>
              </view>
            </view>
          </u-swipe-action>
        </view>
      </me-table>
    </view>
    <view class="submit-btns btn-other-cls">
      <u-button class="u-btn" type="primary" @click="addSchool">添加</u-button>
    </view>
  </view>
</template>
<script>
  import meTable from '@/components/me-table.vue'
  import queryService from '@/service/query/query.service.js'
  import { CONTROL_STATUS } from '@/service/intelligence/mapping/enum.js'
  import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js'
  
  const sysCodeColors = {
    '1': {
      color: '#0079F2',
      borderColor: '#0079F2',
      backgroundColor: '#E0ECFF'
    },
    '0': {
      color: '#AC0000',
      borderColor: '#AC0000',
      backgroundColor: '#F2CCCC'
    }
};
  export default {
    components: { meTable },
    mixins: [MescrollMoreMixin],
    data () {
      return {
        sysCodeColors,
        just: '',
        searchKey: '',
        title: '中小学列表',
        userInfo: this.$storage.get(this.$rp.common.USER)
      }
    },
    methods: {
      getListViewHeight() {
        let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight
        // #ifdef H5-DINGDING || H5-WECHAT
        p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight
        // #endif
        return p  + 'px'
      },
      // 列表数据请求
      loadData(page) {
        let param = {
          page: page.num,
          limit: page.size,
          prohibitName: this.searchKey,
          prohibitClassifyCode: '0101,0102',
          ownGridUuid: this.userInfo.orgUuid
        }
        return new Promise((resolve) => {
          const empty = { count: 0, data: [] }
          queryService.coordinate4School.queryProhibitList(param).then(res => {
            if (res.success) {
              res.data.forEach(item => {
                item.show = false
                this.getItemCanEdit(item)
              })
              resolve({
                count: res.count,
                data: [...res.data]
              })
            } else {
              resolve(empty)
            }
          }).catch(err => {
            resolve(empty)
          })
        })
      },
      // 添加滑块option
      getItemCanEdit(item){
        let swiperOptions = [{
          text: '编辑',
          action: 'edit',
          style: {
            backgroundColor: this.$theme.u_type_primary
          }
        }]
        if(item.isActive == CONTROL_STATUS.DEACTIVATE){
          swiperOptions.push({
            text: '停用',
            action: 'deactivate',
            style: { backgroundColor: this.$theme.u_type_error },
          });
        } else {
          swiperOptions.push({
            text: '启用',
            action: 'enable',
            style: { backgroundColor: this.$theme.u_type_success }
          })
        }
        item.swiperOptions = swiperOptions
      },
      // 查询
      toSearchList () {
        // if (this.$u.test.isEmpty(this.searchKey)) {
        //   this.$u.toast('请输入关键字')
        //   return
        // }
        this.$refs['mescrollItem0'].refresh()
      },
      // 列表滑动-index1是数据索引 index是导航索引
      swiperClick(index1, index) {
        let data = this.$refs.mescrollItem0.listDatas.find(item => item.prohibitUuid === index1) || {}
        if (index === 0) {
          this.$u.route({
            url: 'pages/query/coordinateForSchool/addSchoolCoordinate',
            params: {
              type: 'edit',
              prohibitUuid: index1,
              gridName: data.gridName
            }
          })
        } else {
          this.deleteItem(data)
        }
        this.$refs.mescrollItem0.listDatas.map((val, idx) => {
          this.$refs.mescrollItem0.listDatas[idx].show = false
        })
      },
      // 列表滑块展示
      swiperOpen(index) {
        this.$refs.mescrollItem0.listDatas.map((val, idx) => {
          this.$refs.mescrollItem0.listDatas[idx].show = index == val.prohibitUuid
        })
      },
      // 添加
      addSchool() {
        this.$u.route({
          url: 'pages/query/coordinateForSchool/addSchoolCoordinate',
          params: {
            type: 'add'
          }
        })
      },
      // 删除中小学
      deleteItem(item) {
        queryService.coordinate4School.deleteProhibitInfo({
          prohibitUuid: item.prohibitUuid,
          isActive: item.isActive == 1 ? 0 : 1
        }).then(res => {
          if (res.success) {
            this.$u.toast('更新成功')
            this.$refs['mescrollItem0'].refresh()
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .page{
    padding: 0;
  }
  .supervision-search-lay {
		background-color: #fff;
		position: fixed;
		z-index: 999;
		width: 100%;
		overflow: hidden;
	}
  .supervision-search {
		padding: $cm-search-padding-row $cm-search-padding-column;
	}
  .content {
		background-color: #F3F4F5 ;
    min-height: 100%;
	}
	.list-item-root {
    margin: 10px;
    border-radius: 15px;
    overflow: hidden;
  }
  .list-lay {
    margin: 10px;
  }
  .content-title {
    font-weight: 600;
    font-size: 16px;
    color: black;
  }
  .content-title-lay {
    padding:5px 3px;
  }
</style>